<template lang="html" id="shou">
  <div class="shou">
    <div class="input">
      <span>登陆查看我的等级</span>
      <button type="button" name="button">登陆</button>
    </div>
    <div class="sou">
      <input type="text" name="" value="" placeholder="小二黑历险记">
      <img src="../../static/fang.png" alt="">
      <button type="button" name="button">搜索</button>
    </div>
    <div class="xianmian">
      <p><span class="z1">限时免费</span><span class="z2">周四-周五</span></p>
      <p><daoji endTime="1508761620" :callback="callback" endText="已经结束了"></daoji></p>
    </div>
    <div class="xianshu">
      <div class="ne">
        <img src="../../static/x01.png"><br>
        重生之铁骨凰后
      </div>
      <div class="ne">
        <img src="../../static/x02.png"><br>
        凤权之天命帝妃
      </div>
      <div class="ne">
        <img src="../../static/x03.png"><br>
        最强狂少
      </div>
    </div>
    <div class="con-tou">
      <span>神书热推</span>
    </div>
    <div class="con">
      <div class="ne">
        <img src="../../static/x04.png"><br>
        农女医香
      </div>
      <div class="ne">
        <img src="../../static/x05.png"><br>
        吞天战神
      </div>
      <div class="ne">
        <img src="../../static/x06.png"><br>
        特种警察
      </div>
    </div>
    <ul class="con-di">
      <li><span>玄幻</span> | 修真手机用户</li>
      <li><span>都市</span> | 我竟然变成一条狗</li>
      <li><span>现代</span> | 诱妻入怀:前夫，请温柔</li>
      <li><span>现代</span> | 夜夜欢:裴少的私宠娇妻</li>
    </ul>
    <div class="con-tou">
      <span>畅销推荐</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x11.png"><br>
      </div>
      <div class="">
        <h3>美女的超级保镖</h3>
        <p>都市言情(全本)</p>
        <span>
          杀手界的王者降临花都，成为了超级美女校花的保镖，不曾想卷入了无数的是非当中
      </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>都市</span> | 天才高手在都市</li>
      <li><span>科幻</span> | 买个女鬼当老婆</li>
      <li><span>古代</span> | 江山为聘:美人谋天下</li>
      <li><span>科幻</span> | 我和总裁:丧岛求生</li>
    </ul>
    <div class="con-tou">
      <span>完本精选</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x07.png"><br>
      </div>
      <div class="">
        <h3>大学除灵师</h3>
        <p>科幻灵异(连载中)</p>
        <span>
          人间有大秘，尘世仙鬼妖魔，校园有传说，世上有一种人叫除灵师，且看一组传奇的诞
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>古代</span> | 二嫁新娘:盛宠天才逆妃</li>
      <li><span>古代</span> | 家有恶妇：公子快点跑</li>
      <li><span>现代</span> | 眷宠爱:二婚娇妻太撩人</li>
      <li><span>都市</span> | 我在地府做微商</li>
      <li><span>都市</span> | 超级天神系统</li>
    </ul>
    <div class="con-tou">
      <span>大神专区</span>
    </div>
    <div class="con">
      <div class="ne">
        <img src="../../static/x08.png"><br>
        奋斗在盛唐
      </div>
      <div class="ne">
        <img src="../../static/x09.png"><br>
        神州志
      </div>
      <div class="ne">
        <img src="../../static/x10.png"><br>
        首席的名门...
      </div>
    </div>
    <ul class="con-di">
      <li><span>古代</span> | 家有恶妇：公子快点跑</li>
      <li><span>玄幻</span> | 战气凌霄</li>
      <li><span>玄幻</span> | 绝世狂徒</li>
    </ul>
    <ShouNav></ShouNav>
    <div class="sou">
      <input type="text" name="" value="" placeholder="网络好卡">
      <img src="../../static/fang.png" alt="">
      <button type="button" name="button">搜索</button>
    </div>
    <div class="footer">
      <ul class="u1">
        <li>首页</li>
        <li>书架</li>
        <li>分类</li>
        <li>留言</li>
        <li>充值</li>
        <li>客户端</li>
      </ul>
      <ul class="u2">
        <li>普通版</li>
        <div></div>
        <li><span>触平版</span></li>
      </ul>
      <p><span>看书网</span> wap.kanshu.com</p>
    </div>
    </div>
    <!-- <div class="sou">
      <input type="text" name="" value="" placeholder="小二黑历险记">
      <img src="../../static/fang.png" alt="">
      <button type="button" name="button">搜索</button>
    </div>
    <div class="xianmian" v-for="(val,key) in shu[0]>
      <p><span>{{ val.name }}</span><span>{{ val.date }}</span></p>
      <p><span>{{ tian }}天{{ xiao }}时{{ fen }}分{{ miao }}秒</span></p>
    </div>
    <div class="xianshu" v-for="(val,key) in shu[1]">
      <div class="ne">
        <img :src="val.src" alt=""><br>
        {{ val.name }}
      </div>
    </div> -->
  </div>
</template>

<script>
import ShouNav from './shou-zi/shou-nav.vue'
import daoji from './daoji.vue'
export default {
  components: { ShouNav,daoji }
  // data: () => {
  //   return {
  //     shu: [],
  //     xiao: 0,
  //     fen: 0,
  //     miao: 0,
  //     tian: 0
  //   }
  // },
  // created: () => {
  //   this.$http.get('../../static/index.json').then((res) => {
  //       this.shu = JSON.parse(res.body)
  //     })
  //     setinterval(function() {
  //       let t = this;
  //       let no = new Date().getTime();
  //       let yes = new Date(t.shu[0].jian).getTime();
  //       let shi = yes - no;
  //       if (shi <= 0) {
  //         t.tian = '活动';
  //         t.xiao = '已经';
  //         t.fen = '彻底';
  //         t.miao = '结束';
  //       } else {
  //         t.tian = parseInt(shi / 1000 / 60 / 60 / 24) % 30;
  //         t.xiao = parseInt(shi / 1000 / 60 / 60) % 24;
  //         t.fen = parseInt(shi / 1000 / 60) % 60;
  //         t.miao = parseInt(shi / 1000) % 60;
  //       }
  //
  //     }, 1000)
  // }
}
</script>

<style lang="scss" scoped>
.shou {
    width: 100%;
    .input {
        width: 95%;
        height: 50px;
        line-height: 40px;
        margin: 10px auto;
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
        background: white;
        button {
            width: 80px;
            background: #E98110;
            color: white;
            border: 1px solid #E98110;
        }
    }
    .sou {
        width: 95%;
        height: 40px;
        margin: 10px auto 20px;
        position: relative;
        display: flex;
        justify-content: space-between;
        border: 1px solid #E98110;
        background: white;
        padding: 0 0 0 10px;
        input {
            outline: medium;
            border-style: none;
            width: 75%;
            height: 35px;
        }
        button {
            width: 25%;
            height: 38px;
            text-align: right;
            padding-right: 15px;
            background: #EEEE;
            border: 1px solid #EEE;
            color: #E98110;
        }
        img {
            position: absolute;
            left: 78%;
        }
    }
    .xianmian {
        width: 95%;
        height: 30px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        line-height: 30px;
        background: white;
        .z1 {
            font-size: 17px;
        }
        .z2 {
            font-size: 12px;
            color: #ccc;
        }
    }
    .xianshu {
        width: 95%;
        margin: 0 auto;
        background: white;
        padding: 10px 0 20px;
        display: flex;
        justify-content: space-around;
        .ne {
            width: 30%;
            text-align: center;
            img {
                width: 80%;
                margin: 0 auto;
            }
        }
    }
    .con-tou {
        width: 95%;
        height: 30px;
        margin: 20px auto 0;
        padding: 0 10px;
        line-height: 30px;
        background: white;
        span {
            font-size: 17px;
        }
    }
    .con {
        width: 95%;
        margin: 0 auto;
        background: white;
        padding: 10px 0 20px;
        display: flex;
        justify-content: space-around;
        .ne {
            width: 30%;
            text-align: center;
            img {
                width: 80%;
                margin: 0 auto;
            }
        }
    }
    .con-di {
        width: 95%;
        margin: 0 auto;
        background: white;
        padding-bottom: 20px;
        li {
            width: 95%;
            margin: 0 auto;
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dashed lightgrey;
            span {
                color: #E98110;
            }
        }
    }
    .content {
        width: 95%;
        padding: 10px;
        margin: 0 auto;
        background: white;
        display: flex;
        justify-content: space-around;
        .ne {
            margin-right: 10px;
        }
        p {
            font-size: 13px;
            color: #706e71;
        }
        span {
            color: #9a9897;
        }
    }
    .footer{
      width: 100%;
      background: #333333;
      color:#CCCCCC;
      .u1{
        width: 80%;
        margin:0 auto;
        height:40px;
        line-height: 40px;
        display: flex;
        justify-content: space-around;
      }
      .u2{
        width: 50%;
        margin:0 auto;
        height:30px;
        display: flex;
        justify-content: space-around;
        div{
          width:1px;
          margin-top:8px;
          height:15px;
          background: #CCC;
        }
        li{
          width: 30%;
          height:30px;
          text-align: center;
          line-height: 30px;
          span{
            color:#E98110;
          }
        }
      }
      p{
        width: 100%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        span{
          color:#E98110;
        }
      }
    }
}
</style>
